<template>
  <div class="login_box">
    <div class="login_body_box">
      <div class="login_head">欢迎登录</div>
      <div class="login_main_box">
        <!-- 账号密码的表单 -->
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="账号" prop="username">
            <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item> -->
        </el-form>
        <!-- 登录按钮 -->
        <div class="btn">
          <el-button type="success" @click = "submitForm('ruleForm')">登录</el-button>
          <el-button type="success" >注册</el-button>
          <el-button type="success" >管理员登录</el-button>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { validator: validatePass, trigger: 'blur' }
          ],
          password: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            sessionStorage.setItem("loginMessage", JSON.stringify(this.ruleForm));
            this.$router.push("/home");
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="scss" scoped>
.login_box {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("@/assets/bg.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
/* 主体部分 */
.login_body_box{
  position: absolute;
  /* border: 1px solid red; */
  height: 300px;
  width: 500px;
  background: rgba(0, 0, 0, 0.193);
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 10px;
  .login_main_box{
    margin: auto;
    margin-top: 20px;
    width: 450px;
  }
}
/* 头部标题 */
.login_head{
  color: #FDFACD;
  font-size: 24px;
  font-weight: bold;
  /* border: 1px solid red; */
  text-align: center;
  padding: 20px 0px;
}
/* 修改表单组件 */
::v-deep .el-form-item__label{
  color: white;
  text-align: center;
  font-size: 18px;
}
.btn{
  /* border: 1px solid red; */
  margin-top: 70px;
  display: flex;
}
/* 修改按钮组件 */
::v-deep .el-button{
  width: 100%;
  height: 100%;
  background: #CF5546;
  border: #CF5546;
}

</style>